<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
window.onload=function(){
	var btn=document.getElementById('btn1');
	var aLi=document.getElementsByTagName('li')

	btn.onclick=function(){
		for(var i = 0 ; i < aLi.length; i++){
			if(i%2){
				aLi[i].style.background='#ddd';
				//aLi[i].style.margin='40px';
			}
		}
	}
}
	</script>
	<style>
*{
	margin: 0;
	padding: 0;
	list-style-type: none;	
}
li{
	width: 500px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	border-radius: 4px;
	box-shadow: 0 2px 3px #ddd;
	margin: 3px 0;
}
ul{	width: 500px;
	margin: 100px auto;
}
#btn1{
	display: block;
	background: none;
	border: 1px solid #b6b6b6;
	width: 80px;
	height: 30px;
	margin: 40px auto;
}

	</style>
</head>
<body>
	<ul>
		<li>我是行</li>
		<li>我是行</li>
		<li>我是行</li>
		<li>我是行</li>
		<li>我是行</li>
		<li>我是行</li>
	</ul>
	<input type="button" id='btn1' value='隔行变色'>
</body>
</html>